<!--  -->
<template>
  <div id="splitviewApply">
    <c-title text="机主申请"></c-title>
    <template v-if="info.is_owner == 0 && (info.last_apply_status == -2 || info.last_apply_status == 1)">
      <van-form @submit="onSubmit">
        <van-field v-model="name" name="name" label="姓名" placeholder="请输入您的姓名" :rules="[{ required: true }]" required/>
        <van-field v-model="mobile" name="mobile" label="电话" placeholder="请输入您的电话" :rules="[{ required: true }]" required/>
        <van-field v-model="addressName" name="addressName" label="所在地区" right-icon="arrow" placeholder="请选择" readonly required :rules="[{ required: true }]" @click="addressShow = true" />
        <van-field v-if="strShow" name="street" v-model="street" label="街道" right-icon="arrow" placeholder="请选择" readonly required :rules="[{ required: true }]" @click="streetShow = true" />
        <van-field v-model="address" name="address" label="详情地址" placeholder="请输入详情地址" :rules="[{ required: true }]" required/>
        <van-field v-model="store_name" name="store_name" label="店铺名称" placeholder="请输入店铺名称" :rules="[{ required: true }]" required/>
        <!-- <van-field name="business_pic" label="营业执照" :rules="[{ required: true,message: '请上传营业执照' }]">
          <template #input>
            <van-uploader v-model="business_pic" max-count='1'/>
          </template>
        </van-field> -->
        <van-field name="fileList1" label="营业执照">
          <template #input>
            <yz_uploader v-model="fileList1" :max_count="1"></yz_uploader>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </template>
    <div v-else-if="statuArr[info.last_apply_status]" class="apply-contain">
      <!-- 被驳回/待审核 -->
      <!-- <van-icon :name="statuArr[info.last_apply_status].icon" size="4rem" color="#ee0a24" /> -->
      <img :src="statuArr[info.last_apply_status].icon" alt="" style="width:6.25rem;">
      <p>{{ statuArr[info.last_apply_status].text }}</p>
      <van-button plain round type="danger" v-if="info.is_owner != 1" @click="onClicked">{{ statuArr[info.last_apply_status].btn_txt }}</van-button>
      <van-button plain round type="danger" v-else v-clipboard:copy="info.index_url" v-clipboard:success="onCopy">{{ statuArr[info.last_apply_status].btn_txt }}</van-button>
    </div>
    <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
    <van-popup v-model="streetShow" position="bottom" round :style="{ height: '70%' }" closeable :close-on-click-overlay="false">
      <van-nav-bar title="选择街道">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="streetShow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <van-cell :key="i" is-link v-for="(item, i) in districtVal" @click.native="streetConfirm(item)">
        <span slot="title">{{ item.areaname }}</span>
      </van-cell>
    </van-popup>
  </div>
</template>

<script>
import yz_uploader from "components/ui_components/yz_uploader";

export default {
  data() {
    return {
      name: "",
      mobile: "",
      addressName: "",
      address: "",
      store_name: "",
      fileList1: [],
      street: "",
      strShow: false,
      district: district, // 地址数据

      addressShow: false,
      streetShow: false,
      info: {
        is_owner: 0
      },
      statuArr: {
        "-1": {
          text: "您的申请被驳回，请重新申请",
          icon: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/PendingReview.png",
          btn_txt: "重新提交"
        },
        "0": {
          text: "申请已提交，等待审核~",
          icon: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/PendingReview.png",
          btn_txt: "返回首页"
        },
        "1": {
          text: "您已是机主身份，可复制链接推广",
          icon: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/copylink.png",
          btn_txt: "复制机主链接"
        },
        "-2": {
          text: "您已是机主身份，可复制链接推广",
          icon: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/copylink.png",
          btn_txt: "复制机主链接"
        }
      }
    };
  },

  created() {
    this.getData();
  },

  components: { yz_uploader },

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { msg, result, data } = await $http.get("plugin.big-screen.frontend.apply.index", {}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      let title = this.fun.getPluginSetting('big_screen.plugin_name','农优云');
      this.fun.setWXTitle(title);
      this.info = data;
    },
    onSubmit(e) {
      // if (this.fileList1.length == 0) return this.$toast("请上传营业执照！");
      if (this.fileList1.length > 0) this.business_pic = this.fileList1[0];
      this.submitApply(e);
    },
    async submitApply(e) {
      let { addressName, fileList1, street, ...JsonData } = e;
      let json = JsonData;
      json.business_pic = this.business_pic||'';
      json.province_id = this.province_id;
      json.city_id = this.city_id;
      json.district_id = this.district_id;
      if(this.street_id) json.street_id = this.street_id;
      let { msg, result, data } = await $http.get("plugin.big-screen.frontend.apply.apply", json, ".");
      this.$toast(msg);
      if (result == 1) this.getData();
    },
    // 地址回调
    addressCallback(obj) {
      this.street = "";
      this.districtVal = "";
      this.addressName = obj.itemName1 + " " + obj.itemName2 + " " + obj.itemName3;
      this.province_id = obj.itemValue1;
      this.city_id = obj.itemValue2;
      this.district_id = obj.itemValue3;
      this.getStreet(obj.itemValue3);
    },
    // 获取街道
    getStreet(param) {
      $http
        .get(
          "member.memberAddress.street",
          {
            district_id: param
          },
          " "
        )
        .then(response => {
          if (response.result === 1 && response.data && response.data.length > 0) {
            this.districtVal = response.data;
            this.strShow = true;
          }
        });
    },
    streetConfirm(item) {
      this.street = item.areaname;
      this.street_id = item.id;
      this.streetShow = false;
    },
    onClicked() {
      let name = this.info.last_apply_status == -1 ? "splitviewApply" : "home";
      if (name == 'home' && window.isMiniprogram) {
        // 小程序端跳转对应页面
        return wx.miniProgram.redirectTo({ url: `/packageG/index/index` });
      }
      if(this.info.last_apply_status == -1) return this.info.last_apply_status = -2;
      this.$router.replace(this.fun.getUrl(name, {}));
    },
    onCopy() {
      this.$toast("已复制到剪切板");
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#splitviewApply {
  .apply-contain {
    margin-top: 50%;
    p {
      padding: 0.875rem;
      font-size: 0.875rem;
      // font-weight: bold;
    }
  }
}
</style>
